<template>
  <div class="step-warp">
    <div class="step-left">
      <div class="step-left--item">
        <p>CodeServer Extension</p>
        <SettingSwitch :title="'ms.python'" v-model:value="CSExtension[0]"/>
        <SettingSwitch :title="'jupyter'" v-model:value="CSExtension[1]"/>
        <SettingSwitch :title="'database.client'" v-model:value="CSExtension[2]"/>
        <SettingSwitch :title="'drawio'" v-model:value="CSExtension[3]"/>
      </div>
      <div class="step-left--item">
        <p>Package Mirrors</p>
        <h4>Pypi / Conda / Apt</h4>
        <n-dropdown trigger="hover" :options="PackageMirrorsOpts" @select="handleSelect">
          <n-button>{{ PackageMirrorsSelected }}</n-button>
        </n-dropdown>
      </div>
    </div>
    <div class="step-right">
      <p>Development Extensions</p>
      <div class="step-right-warp">
        <div class="step-right--left">
          <SettingSwitch class="step-right-item" :title="'OpenCV'" v-model:value="OpenCV"/>
          <div class="step-right-item">
            <SettingSwitch :title="'Golang'" v-model:value="Golang.able"/>
            <SettingInput :titleFontSize="16" :title="'version'" v-model:value="Golang.version" placeholder=""/>
          </div>
          <div class="step-right-item">
            <SettingSwitch :title="'TensorRT'" v-model:value="TensorRT.able"/>
            <div class="flex">
              <SettingInput style="width: 45%" :titleFontSize="16" :title="'os'" v-model:value="TensorRT.os" placeholder=""/>
              <SettingInput style="width: 45%" :titleFontSize="16" :title="'cuda'" v-model:value="TensorRT.cuda" placeholder=""/>
            </div>
            <SettingInput :titleFontSize="16" :title="'trt'" v-model:value="TensorRT.trt" placeholder=""/>
          </div>
        </div>
        <div>
          <div class="step-right-item">
            <SettingSwitch :title="'JupyterLab'" v-model:value="JupyterLab.able"/>
            <div class="flex">
              <SettingInput style="width: 45%" :titleFontSize="16" :title="'Container Port'" v-model:value="JupyterLab.ContainerPort" placeholder=""/>
              <SettingInput style="width: 45%" :titleFontSize="16" :title="'Host Post'" v-model:value="JupyterLab.HostPost" placeholder=""/>
            </div>
            <SettingInput :titleFontSize="16" :title="'Token'" v-model:value="JupyterLab.Token" placeholder=""/>
          </div>
          <div class="step-right-item">
            <SettingSwitch :title="'JupyterLab'" v-model:value="Tensorboard.able"/>
            <div class="flex">
              <SettingInput style="width: 45%" :titleFontSize="16" :title="'Container Port'" v-model:value="Tensorboard.ContainerPort" placeholder=""/>
              <SettingInput style="width: 45%" :titleFontSize="16" :title="'Host Post'" v-model:value="Tensorboard.HostPost" placeholder=""/>
            </div>
            <SettingInput :titleFontSize="16" :title="'Container Dir'" v-model:value="Tensorboard.ContainerDir" placeholder=""/>
            <SettingInput :titleFontSize="16" :title="'Host Dir'" v-model:value="Tensorboard.HostDir" placeholder=""/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { NDropdown, NButton, /*NInput, NForm, NSwitch,  NFormItem */} from 'naive-ui'
import { reactive, ref } from "vue";
import SettingSwitch from '@/components/fsConfig/SettingSwitch'
import SettingInput from "@/components/fsConfig/SettingInput";

let CSExtension = reactive(new Array(4))

let OpenCV = ref('')

let Golang = reactive({
  able: null, version: null
})

let TensorRT = reactive({
  able: null, os: null, cuda:null, trt: null
})

let JupyterLab = reactive({
  able: null, ContainerPort: null, HostPost:null, Token: null
})

let Tensorboard = reactive({
  able: null, ContainerPort: null, HostPost:null, ContainerDir: null, HostDir: null
})

let PackageMirrorsOpts = [
  {
    label: 'tuna',
    key: 'tuna'
  },
  {
    label: 'tuna1',
    key: "tuna1"
  },
  {
    label: 'tuna2',
    key: "tuna2"
  }
]
let PackageMirrorsSelected = ref('tuna')

function handleSelect(e) {
  PackageMirrorsSelected.value = e
}
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.step-warp p{
  font-size: 26px;
}
.step-warp {
  display: flex;
  width: 70vw;
  margin-top: 40px;
}
.step-left {
  min-width: 40%;
  margin-right: 100px;
}
.step-left--item *{
  margin-bottom: 20px;
}
.step-right {
  flex: 1;
}
.step-right-warp {
  display: flex;
}
.step-right--left {
  margin-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.step-right-item {
  border: 1px solid var(--settingBorderColor);
  padding: 20px;
  margin: 10px 0;
  border-radius: 10px;
}
</style>
